import React from "react";
import Taro from "@tarojs/taro";
import { View, Text, ScrollView, Image } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import "./HotSale.less";
import homeData from "../../../state/homeData";
import { observer } from "mobx-react";

const HotSale = () => {
  return (
    <View className="home-hotsale-wrap">
      <View className="hotsale-header .h-container">
        <Text className="header-title">热销</Text>
        <View className="header-more">
          <Text>更多</Text>
          <AtIcon
            prefixClass="ri"
            value="arrow-right-s-line"
            size="20"
            color="#00000070"
          />
        </View>
      </View>
      <ScrollView className="hotsale-scroll" scrollX>
        <View className="hotsale-group">
          {homeData.hotSellList.map((item, index) => {
            return (
              <View className="hotsale-item">
                <Image mode="widthFix" src={item.image_url} />
                <View className="hotsale-title">
                  <Text>{item.name}</Text>
                </View>
                <View className="hotsale-price">
                  <Text>￥{item.sell_price}</Text>
                  <Text>￥{item.sell_price}</Text>
                </View>
              </View>
            );
          })}
        </View>
      </ScrollView>
    </View>
  );
};

export default observer(HotSale);
